<template>
	<view class="flex-container" v-for="(item,index) in orderArr" :key="index">
		<view>
			<text class="ddid">订单编号：{{item.goodsNum}}</text>
			<text class="ddstate">状态：{{item.logisticsInfo}}</text>
		</view>
		<view class="contentDetail">
			<image :src="'/static/Mall/'+item.goodsImg"></image>
			<p>商品规格：{{item.goodsXing}}</p>
			<p>￥{{item.orderAllMoney}}</p>
			<p>收货地址：{{item.shipAddress}}</p>
			<p>收货电话：{{item.shipPhone}}</p>
		</view>
		<view><text class="ddzje">已付金额：￥{{item.orderAllMoney}}</text></view>
	</view>
</template>

<script>
import { reactive, toRefs } from 'vue';
import {onShow} from '@dcloudio/uni-app';
import myRequest from '../../../utils/myRequest.js';
export default {
	components: {},
	setup() {
		let data = reactive({
			orderArr:[
				
			]
			
		});
		onShow(function(){
			// 获取订单
			myRequest({
				url: "/getOrder"
			}).then((res)=>{
				console.log(res.data.data)	
				if(res.data.code==200){
					data.orderArr = res.data.data;
					console.log(data.orderArr)
					data.orderArr.forEach((item) => {
						item.orderId = JSON.parse(item.orderId);
					})
				
				}
				
			})
		})
		return {...toRefs(data)}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
template {
	background-color: grayscale($color: #dddddd);
}
.flex-container {
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 10rpx 0rpx;
	width: auto;
	margin: 30rpx 0rpx;
	border: 1rpx 0.5 gray solid;
	border-radius: 8px;
	color: grayscale($color: #717171);
}

.flex-container > view {
	border-bottom: 0.3rpx #e3e3e3 solid;
	padding: 0rpx 60rpx;
	margin: 5rpx 0rpx;
	width: auto;
	height: auto;
	line-height: 25px;
	font-size: 26rpx;
}
.flex-container > view:last-child {
	border-bottom: none;
}
.flex-container .contentDetail {
	height: 210rpx;
}

.ddstate {
	float: right;
}
image {
	width: 200rpx;
	height: 200rpx;
	float: left;
	margin-right: 40rpx;
}
</style>
